<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<style>
		.div1{
			width: 100px;
			height: 100px;
			border:15px solid #0000FF;
			/* border-radius: 5px 5px;
			box-shadow: 2px 2px #000000; */	
			border-image: url(css/img/background.png) 30 30  round;
		}
		.div2{
			width: 100px;
			height: 100px;
			background-image: url(css/img/logo-word.png),url(css/img/pwd-icons-new.png);
						background-position: left top,right bottom;
						background-repeat: no-repeat,no-repeat;
						background-size: 50px 50px;
		}
		.div3{
			width:100px;
			height: 100px;
			/* background: linear-gradient(yellow,red); */
			/* background: -webkit-linear-gradient(left,yellow,red); */
			/* background: -webkit-linear-gradient(left top,yellow,red,blue,green); */
			background: -webkit-linear-gradient(left top,rgba(255,0,0,0.5),rgba(0,255,0,0.5),rgba(0,0,255,0.5));
			/* -webkit-background-clip: text;
			color: transparent;
			font-size: 30px;
			font-weight: bold;
			text-shadow: 2px 2px red; */
			
		}
		.div4{
			width:100px;
			height: 100px;
			/* background: radial-gradient(circle,yellow 30%,red 70%); */
			background: repeating-radial-gradient(circle,yellow 30%,red 70%);
			
		}
		.p{
			width: 3.125rem;
			text-overflow: ellipsis;
			overflow: hidden;
			-web
			white-space: nowrap;
			
		}
		.p2{
			width: 50px;
			overflow: hidden;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
					display: -webkit-box;
					}
					@font-face {
						font-family:liuti;
						src: url(./ygy.ttf);
					}
					div,p{
						font-family:liuti;
					}
		.div5{
			width:50px;
			height: 50px;
			background: #FFFF00;
		}
		#id5{
			position: absolute;
			
		}
		.div6{
			width:100px;
			height: 100px;
			background: #FFFF00;
			
		}
	/* 	.div5:active{
			/* transform: translate(200px,0); */
			/* transform:rotate(360deg) ;
			transition: transform 2s; 
		} */
	</style>
	<body>
		<div class="div1">sss</div>
		<div class="div2"></div>
		<div class="div3">你爸爸</div>
		<div class="div4">
			
		</div>
		<p class="p">你丫丫sssssss</p>
		<p class="p2">你丫丫sssssss</p>
		
		<div class="div5" id="id5" onmousemove="move(this)"  onmouseout="out(this)" >你看我移动了吗</div>
		<div class="div6" onclick="big1(this)">
			
			
		</div>
		
		
		<script type="text/javascript">
			function move(curr){
				curr.style.transform="rotate(180deg)";
				curr.style.transition="transform 2s"
				
			}
					function out(curr){
				curr.style.transform="rotate(0deg)";
				curr.style.transition="transform 2s"
				
			}
			
			function big1(curr){
				var width=curr.offsetWidth+curr.offsetWidth;
				var height=curr.offsetHeight+curr.offsetHeight;
				curr.style.width=width+"px";
				curr.style.height=height+"px";
				/* curr.style.transform="scale(2,2)"; */
				curr.style.transition="width 1s,height 1s"
				
			}
			document.onkeydown=function(event){
				var code=event.keyCode;
				alert(event.keyCode);
				
				var id5 =document.getElementById("id5");
				var oldleft=id5.offsetLeft;
				var oldtop=id5.offsetTop;
				if(code==37){
					var newleft=oldleft-50;
					//向左移动
					id5.style.left=newleft+"px";
					curr.style.transition="left 1s"
					
					
					
				}else if(code==39){
					var newleft=oldleft+50;
					//向右移动
					id5.style.left=newleft+"px";
					curr.style.transition="left 1s"
					
					
					
				}else if(code==40){
					var newtop=oldtop+50;
					//向右移动
					id5.style.top=newtop+"px";
					curr.style.transition="top 1s"
				}else if(code==38){
					var newtop=oldtop-50;
					//向右移动
					id5.style.top=newtop+"px";
					curr.style.transition="top 1s"
				}
				
				
				
				
			}
		</script>
	</body>
</html>
